<template>
  <div class="login-container">
    <!-- 右上角图标导航 -->
    <div class="top-nav-icons">
      <div class="nav-icon" @click="goToHome" title="首页">
        <el-icon>
          <House />
        </el-icon>
      </div>
      <div class="nav-icon" @click="goToAbout" title="100行业">
        <el-icon>
          <InfoFilled />
        </el-icon>
      </div>
      <div class="nav-icon" @click="goToChat" title="erp">
        <el-icon>
          <ChatDotRound />
        </el-icon>
      </div>
    </div>
    <el-card class="login-card">
      <h2 class="login-title">Hello</h2>
      <el-form :model="form" @submit.native.prevent @keyup.enter="handleLogin">
        <el-form-item>
          <el-input v-model="form.username" placeholder="用户名/邮箱" prefix-icon="el-icon-user" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" placeholder="密码" show-password prefix-icon="el-icon-lock" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="handleLogin"> 登录 </el-button>
        </el-form-item>
      </el-form>
      <div class="settings-icon" @click="settingConfig">
        <el-icon>
          <Setting />
        </el-icon>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { login } from '../js/user'
import { useRouter } from 'vue-router'
import { Setting, House, InfoFilled, ChatDotRound } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { setBaseURL } from '@/utils/request'

const router = useRouter()

const form = ref({
  username: '',
  password: '',
})

const handleLogin = async () => {
  const param = {
    userName: form.value.username,
    password: form.value.password,
  }
  login(param)
    .then((data) => {
      console.log('data = ', data)
      localStorage.setItem('userLoginInfo', JSON.stringify(data.data))
      localStorage.setItem('token', data.data.token)
      if (data.data.success) {
        routerAbout(data.data.success)
        ElMessage.success('登录成功')
      } else {
        ElMessage.error(data.data.message)
      }
    })
    .catch((error) => { })
}

const routerAbout = (success) => {
  router.push({
    path: '/about',
    query: {
      suc: success,
    },
  })
}

const settingConfig = () => {
  ElMessageBox.prompt('请输入服务器IP和端口', '设置', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputValue: 'http://tt.xwbb.top',
  })
    .then(({ value }) => {
      setBaseURL(value)
      ElMessage({
        type: 'success',
        message: `地址是:${value}`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Input canceled',
      })
    })
}

// 右上角图标跳转方法
const goToHome = () => {
  window.open('/home', '_blank').focus()
  //  window.open('/gimini', '_blank').focus()
}

const goToAbout = () => {
  window.open('/navigationMain', '_blank').focus()
  // window.open('https://www.baidu.com', '_blank').focus();
}

const goToChat = () => {
  window.open('/xwChat', '_blank').focus()
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 350px;
  padding: 20px 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  position: relative;
}

.login-title {
  text-align: center;
  font-size: 26px;
  margin-bottom: 25px;
  font-weight: bold;
  background: linear-gradient(90deg, #9b8cff, #4da3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-btn {
  width: 100%;
  background-color: #1e90ff;
}

.settings-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #999;
  cursor: pointer;
}

/* 右上角图标导航样式 */
.top-nav-icons {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 15px;
  z-index: 1000;
}

.nav-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.nav-icon:hover {
  background: rgba(30, 144, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.2);
}

.nav-icon .el-icon {
  font-size: 18px;
  color: #1e90ff;
  transition: color 0.3s ease;
}

.nav-icon:hover .el-icon {
  color: #0066cc;
}
</style>
